import styles from './SustainKG.module.scss'
import { ChatLayout } from '@/components/Planner/ChatLayout/ChatLayout'
import { useStyles } from '@/hooks/styles'
import { useEffect, useRef } from 'react'
import { observer } from 'mobx-react'
import { useChatStore } from '@/hooks'
import * as echarts from 'echarts'

const SustainKG = observer(() => {
  const styleClass = useStyles(styles)
  const chatStore = useChatStore()

  const mainRef = useRef()

  const initChart = (chartDom: HTMLElement) => {
    const myChart = echarts.init(chartDom)

    const option = {
      title: {
        text: '',
      },
      tooltip: {},
      animationDurationUpdate: 5000,
      // animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          layout: 'force',
          symbolSize: 50,
          roam: true,
          focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
          draggable: true, // 指示节点是否可以拖动
          label: {
            // node的标签
            fontSize: 16,
            show: true,
          },
          force: {
            repulsion: [2000, 4000], // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
            edgeLength: [80, 100], // 边的两个节点之间的距离
            gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            // layoutAnimation: false,
          },
          edgeSymbolSize: [2, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
          edgeLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
            formatter: '{c}',
          },

          // 鼠标悬停高亮样式
          emphasis: {
            itemStyle: {
              shadowColor: 'rgba(127,127,127,0.4)',
              shadowBlur: 15,
            },
            lineStyle: {
              width: 4,
            },
            label: {
              textBorderColor: 'rgba(255, 255, 255, 0.8)',
              textBorderWidth: 0.5,
            },
          },

          edgeSymbol: ['circle', 'arrow'],
          // edgeLabel: {
          //     show: true,
          //     formatter: '{b}:{@source}',
          //     fontSize: 12
          // },
          data: [
            { name: '农业技术开发与基础设施建立' },
            { name: '农业环境信息采集' },
            { name: '干旱监测分析' },
            { name: '虫害防治' },
            { name: '农业智能控制' },
            { name: '数据共享' },
            { name: '数据存储' },
            { name: '信息汇聚' },
            { name: '农业节水' },
            { name: '地质环境评估' },
            { name: '农业水资源配置' },
            { name: '农业能耗计算' },
            { name: '农业环境信息监测' },
            { name: '数据管理' },
          ],
          // links: [],
          links: [
            {
              source: '农业技术开发与基础设施建立',
              target: '数据管理',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '农业环境信息采集',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '干旱监测分析',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '虫害防治',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '农业智能控制',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '数据共享',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '数据存储',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '信息汇聚',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '农业节水',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '地质环境评估',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '农业水资源配置',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '农业能耗计算',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '农业环境信息监测',
              value: 'have_function_of',
            },
            {
              source: '农业技术开发与基础设施建立',
              target: '数据管理',
              value: 'have_function_of',
            },
          ],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0.05,
          },
          // label:{
          //     show:true,
          // }
        },
      ],
    }

    // 节点自定义拖拽不回弹
    myChart.on('mouseup', function (params) {
      const op = myChart.getOption()
      op.series[0].data[params.dataIndex].x = params.event.offsetX
      op.series[0].data[params.dataIndex].y = params.event.offsetY
      op.series[0].data[params.dataIndex].fixed = true
      myChart.setOption(op)
    })

    option && myChart.setOption(option)
  }

  const drawGraph = (chartDom: HTMLElement, nodes_get, links_get) => {
    const myChart = echarts.init(chartDom)
    const cat = [
      { name: 'Sustainable' },
      { name: 'Function' },
      { name: 'Technology' },
    ]

    window.onresize = function () {
      myChart.resize()
    }

    const option = {
      title: {},
      tooltip: {},
      legend: [
        {
          orient: 'vertical',
          x: 'left',
          y: 'center',
          itemGap: 30,
          icon: 'circle',
          padding: [0, 0, 0, 30], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: cat.map(function (a) {
            return a.name
          }),
        },
      ],
      animationDurationUpdate: 5000,
      series: [
        {
          type: 'graph',
          layout: 'force',
          symbolSize: 50,
          roam: true,

          focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
          draggable: true, // 指示节点是否可以拖动
          label: {
            // node的标签
            fontSize: 16,
            show: true,
          },
          force: {
            repulsion: [2000, 4000], // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
            edgeLength: [80, 100], // 边的两个节点之间的距离
            gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            // layoutAnimation: false,
          },
          edgeSymbolSize: [2, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
          edgeLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
            formatter: '{c}',
          },

          // 鼠标悬停高亮样式
          emphasis: {
            itemStyle: {
              shadowColor: 'rgba(127,127,127,0.4)',
              shadowBlur: 15,
            },
            lineStyle: {
              width: 4,
            },
            label: {
              textBorderColor: 'rgba(255, 255, 255, 0.8)',
              textBorderWidth: 0.5,
            },
          },

          edgeSymbol: ['circle', 'arrow'],
          // edgeLabel: {
          //     show: true,
          //     formatter: '{b}:{@source}',
          //     fontSize: 12
          // },
          data: nodes_get,
          // links: [],
          links: links_get,
          categories: [
            { name: 'Sustainable', itemStyle: { color: '#73AD69' } },
            {
              name: 'Function',
              itemStyle: { color: '#6499B0' },
            },
            { name: 'Technology', itemStyle: { color: '#886CC5' } },
          ],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0.1,
            color: function (params) {
              if (params.data.value == 'have_function_of') return '#73AD69'
              else return '#6499B0'
            },
          },
          // {#itemStyle:{
          //     normal:{
          //         color: function(params){
          //             return params.data.colors;
          //         }
          //     }
          // },#}
        },
      ],
    }

    // 节点自定义拖拽不回弹
    myChart.on('mouseup', function (params) {
      const op = myChart.getOption()
      op.series[0].data[params.dataIndex].x = params.event.offsetX
      op.series[0].data[params.dataIndex].y = params.event.offsetY
      op.series[0].data[params.dataIndex].fixed = true
      myChart.setOption(op)
    })

    option && myChart.setOption(option)
  }

  useEffect(() => {
    initChart(mainRef.current)
  }, [])

  useEffect(() => {
    if (chatStore.graphData.nodes_get.length > 0) {
      drawGraph(
        mainRef.current,
        chatStore.graphData.nodes_get,
        chatStore.graphData.links_get
      )
    }
  }, [chatStore.graphData])
  return (
    <div {...styleClass(['layout'])}>
      <div {...styleClass(['header'])}>
        <div {...styleClass(['header-text'])}>
          Knowledge Graph Map for Sustainable Education
        </div>
      </div>
      <div {...styleClass(['content-layout'])}>
        <div {...styleClass(['left-layout'])}>
          <div id={'main'} ref={mainRef} {...styleClass(['left-main'])}></div>
        </div>

        <div {...styleClass(['right-layout'])}>
          <ChatLayout width={740} />
        </div>
      </div>
    </div>
  )
})

export default SustainKG
